<template>
  <div class="centerRight1">
      <div class="h-title-box">
        <span class="h-title">数据情况</span>
        <dv-decoration-3 class="h-deco"/>
      </div>
      <div class="charts-details">
        <!-- <VsCenterRight1Chart class="datas"/> -->
        <div class="percent">
        <div class="item">
          <span>今日任务通过率</span>
          <VsCenterRight1RateChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
        </div>
        <div class="item">
          <span>今日任务达标率</span>
          <VsCenterRight1RateChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
        </div>
      </div>
      <dv-water-level-pond :config="config" class="water-level"/>
      </div>
  </div>
</template>

<script>
import VsCenterRight1Chart from "./charts/VsCenterRight1Chart";
import VsCenterRight1RateChart from "./charts/VsCenterRight1RateChart";
export default {
  components: {
    VsCenterRight1Chart,
    VsCenterRight1RateChart
  },
  data() {
    return {
     config:{
      data: [60, 45],
      shape: 'roundRect'
     },
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: "centerRate1",
          tips: 60,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate2",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad"
              }
            }
          }
        }
      ]
    };
  },

  mounted() {
  },
  methods: {
  }
};
</script>

<style lang="less" scoped>
.centerRight1{
    width: 100%;
    height: 100%;
  .charts-details{
    width: 100%;
    height: 100%;
    .percent{
      width:100%;
      height:calc(50% - 20px);
      margin-top:20px;
      display: flex;
      justify-content:space-around;
    }
    .water-level{
      width:100%;
      margin-top:10px;
      height:calc(50% - 20px);
    }
  }
}
</style>